<template>
  <div class="view-header">
    <div class="file-name">
      {{ fileInfo.originalFileName }}.{{ fileInfo.fileExt }}
    </div>
    <div class="file-desc">
      <span class="desc-item">{{ fileInfo.fileSize | formatFileSize }}</span>
      <span class="desc-item">{{ fileInfo.gmtCreated | formatDate('yyyy-MM-dd hh:mm') }}</span>
      <span class="desc-item">由<span class="uploader">{{ fileInfo.realName }}</span>上传</span>
    </div>
    <div class="option-container">
      <FileDownload :file-id="fileInfo.fileUuid">
        <el-tooltip content="下载当前文件资源" placement="bottom">
          <i class="el-icon-download" />
        </el-tooltip>
      </FileDownload>
      <el-tooltip content="分享当前文件资源" placement="bottom">
        <i v-if="type==='view'" class="el-icon-share" @click="share" />
      </el-tooltip>

      <el-tooltip content="新窗口打开当前页面" placement="bottom">
        <i v-if="type==='view' && mode==='dialog'" class="el-icon-top-right" @click="open" />
      </el-tooltip>
      <el-tooltip content="关闭当前窗口" placement="bottom">
        <i v-if="type==='view'" class="el-icon-close" @click="close" />
      </el-tooltip>
    </div>
  </div>
</template>
<script>
import { getViewUrl } from '../util.js'
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
export default {
  props: {
    fileId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileInfo: {},
      mode: null,
      type: null
    }
  },
  watch: {
    fileId: function(val) {
      this.fetchFile()
    }
  },
  created() {
    this.fetchFile()
    this.mode = this.$route.query.mode
    this.type = this.$route.params.type
  },
  methods: {
    fetchFile() {
      this.fileInfo = {}
      if (this.fileId) {
        this.$store.dispatch('viewFileResourcesGetByUUID', this.fileId).then((res) => {
          if (res) {
            this.fileInfo = res
            document.title = `${res.originalFileName}.${res.fileExt}`
            this.$emit('file', res)
          } else {
            this.$modal.msgWarning('文件资源不存在，即将自动关闭窗口')
            alert(1)
            setTimeout(() => {
              this.close()
            }, 2000)
          }
        })
      }
    },
    settingInfo(data) {
      this.fileInfo = data
      document.title = `${data.originalFileName}.${data.fileExt}`
    },
    close() {
      window.parent.postMessage({ closeIframe: true }, '*')
      window.opener = null
      window.open('', '_self')
      window.close()
    },
    open() {
      this.close()
      window.open(window.location.href.replace('mode=dialog', ''))
    },
    share() {
      console.log(this.T.getUrl())
      var shareUrl = this.$router.resolve({ path: getViewUrl(this.fileInfo.fileUuid, this.fileInfo.fileType, 'share', this.fileInfo.originalFileName + '.' + this.fileInfo.fileExt) }).href
      // var shareUrl = window.location.href.replace('mode=dialog', '')
      this.$copyText(this.T.getUrl() + shareUrl)
      this.$modal.msgSuccess('链接已复制，所有人可查看')
    }
  }
}
</script>
<style lang="scss" scoped>
.view-header{
  display: flex;
  flex-direction: row;
  height: 50px;
  line-height: 50px;
  background: #4b4b4b;
  box-shadow: 0px -1px 1px 0px rgba(255,255,255,0.05) inset, 0px 1px 1px 0px rgba(0,0,0,0.20);
  padding: 0 30px;
  color: #fff;
  font-size: 16px;
  .file-name{
    font-size: 16px;
  }
  .file-desc{
    font-size: 14px;
    .uploader{
      color: #449FF3;
      padding: 0 3px;
    }
    .desc-item{
      margin-left: 14px;
    }
  }
  .option-container{
    flex: 1;
    text-align: right;
    i{
      margin-left: 10px;
      cursor: pointer;
      font-size: 20px;
    }
  }
}
</style>
